<template>
	<view class="five-pump">
		<view class="item" v-for="(item,index) in openMagicBox" :key="index">
			<view
				:class="['item-content',{'max':item.level_id==1},{'special':item.level_id==2},{'hide':item.level_id==3},{'pt':item.level_id==4}]">
				<image class="good" :src="$util.img(item.goods_image)" mode="widthFix"></image>
				<view class="des">
					<view class="type">{{item.box_level}}</view>
					<view class="name">{{item.goods_name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			openMagicBox:{
				type:Array
			}
		},
	}
</script>

<style lang="scss" scoped>
	.five-pump {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: 918rpx;
		margin-top: 142rpx;

		.item {
			flex: 1 0 33.33%;
			display: flex;
			justify-content: center;

			&:nth-of-type(1),
			&:nth-of-type(2) {
				flex: 0 1 50%;
			}

			.item-content {
				width: 215rpx;
				height: 294rpx;
				position: relative;

				.good {
					position: absolute;
					z-index: 10;
					bottom: 220rpx;
					width: 213rpx;
				}

				.des {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					text-align: center;

					.type {
						font-size: 35rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FFFFFF;
					}

					.name {
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						width: 189rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						display:-webkit-box;  //弹性盒模型
						-webkit-box-orient:vertical;  //上下垂直
						-webkit-line-clamp:2;  //自定义行数
					}
				}

				&.pt {
					background: url(../../../../static/image/pt-bg.png);
					background-size: 100% 100%;
				}

				&.max {
					background: url(../../../../static/image/max-bg.png);
					background-size: 100% 100%;
				}

				&.special {
					background: url(../../../../static/image/special-bg.png);
					background-size: 100% 100%;
				}

				&.hide {
					background: url(../../../../static/image/hide-bg.png);
					background-size: 100% 100%;
				}
			}

		}
	}
</style>
